<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <!-- 在以前，你用img，这么写相对路径，也无法帮你修正为最终真实的路径 -->
        <!-- 脚手架升级到5的版本后就可以了 -->
        <!-- 脚手架5它只是帮你修复了原生标签这种相对路径的问题，但是组件，它没有修复 -->
        <!-- 解决办法，src给冒号，并且给相对路径加 `require('路径')` -->
        <!-- 只要是相对路径，那都要加 `require('相对路径')` -->
        <van-image :src="require('../../assets/logo.png')" fit="contain" />
      </template>
      <template #right>
        <van-button @click="$router.push('/search')" round icon="search" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏  ---  新闻列表 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>

      <div class="icon-box" @click="channelShow = true">
        <van-icon class="channel-icon" name="wap-nav" />
      </div>
    </van-tabs>

    <van-action-sheet v-model="channelShow" title="频道管理">
      <!-- <ChannelEdit
        :ownList="ownList"
        :allList="allList"
        @add="ownList.push($event)"
        @del="ownList.splice($event, 1)"
        @close="channelShow = false"
        :value="active"
        @input="active = $event"
      /> -->

      <!--
        v-model其实是一个语法糖
          它会自动帮你生成 :value="数据" 和 @input="数据 = $event"
          所以假如说你写了 v-model="active"， 它会帮你自动生成 :value="active" 以及 @input="active = $event"
      -->
      <ChannelEdit
        :ownList="ownList"
        :allList="allList"
        @add="ownList.push($event)"
        @del="doDel"
        @close="channelShow = false"
        v-model="active"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { ownChannelsAPI, allChannelsAPI, saveChannelsAPI } from '@/api/channel'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      channelShow: false,
      active: 0,
      // 保存自己的频道的数组
      ownList: [],
      allList: [],
      isFirst: true
    }
  },
  methods: {
    doDel (index) {
      this.ownList.splice(index, 1)
      // 判断要删的下标是不是在当前下标前面
      if (index < this.active) {
        this.active--
      }
    }
  },
  async created () {
    // if (this.$store.state.tokenObj.token) {
    //   // 获取用户自己的频道
    //   const res = await ownChannelsAPI()
    //   this.ownList = res.data.channels
    // } else {
    //   // 从本地存储取
    //   const local = JSON.parse(localStorage.getItem('hmtt94-channel'))
    //   if (local) {
    //     this.ownList = local
    //   } else {
    //     const res = await ownChannelsAPI()
    //     this.ownList = res.data.channels
    //   }
    // }

    // 先获取本地
    const local = JSON.parse(localStorage.getItem('hmtt94-channel'))
    if (this.$store.state.tokenObj.token || !local) {
      // 获取用户自己的频道
      const res = await ownChannelsAPI()
      this.ownList = res.data.channels
    } else {
      this.ownList = local
    }

    // 获取所有的频道
    const res2 = await allChannelsAPI()
    this.allList = res2.data.channels
  },

  watch: {
    async ownList () {
      if (this.isFirst) {
        this.isFirst = false
        return
      }
      // 想办法，如果是第一次就不往要下执行
      // 先判断有没有登录
      if (this.$store.state.tokenObj.token) {
        // 登录了，发请求
        // 准备一个传递过去的对象数组
        const channels = this.ownList.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        await saveChannelsAPI({
          channels
        })
      } else {
        // 没登录，保存到本地
        localStorage.setItem('hmtt94-channel', JSON.stringify(this.ownList))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  .van-image {
    width: 120px;
    height: 46px;
  }
  .van-button {
    height: 30px;
    width: 110px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon {
      color: #fff;
    }
  }
}

.van-tabs {
  $size: 30px;
  ::v-deep .van-tabs__wrap {
    margin-right: $size;
  }
  .icon-box {
    position: absolute;
    right: 0;
    top: 3px;
    background-color: #fff;
    .channel-icon {
      font-size: $size;
    }
  }
}
</style>
